// 弹出检测项目

<template>
  <ul class="treeMenu">
    <li v-for="(item, index) in data" :key="item[props.key]">
      <div class="tree-item">
        <div class="tree-item-left">
          <i
            v-show="item.level != level"
            :class="['triangle', carets[tapScopes[index]]]"
            @click="changeStatus(index)"
          />
          <p :class="['treeNode', { 'treeNode--select': item.onSelect }]">
            <van-radio
              :name="item[props.key]"
              @click="checked(item)"
              v-if="item.level == level"
            />

            <span class="title"
              >{{ item[props.label]
              }}<span v-show="item[props.children].length > 0"
                >（{{ item[props.children].length }}）</span
              ></span
            >
          </p>
        </div>
      </div>
      <v-popup-projectItem
        v-show="scopes[index]"
        :data="item[props.children]"
        :defaultCode="defaultCode"
        :level="level"
        v-bind="$props"
        v-on="$listeners"
      ></v-popup-projectItem>
    </li>
  </ul>
</template>

<script>
const CARETS = { open: "caret-down", close: "caret-right" };
export default {
  name: "v-popup-projectItem",
  props: {
    data: { type: Array, default: () => [] },
    isSelect: { type: Boolean, default: false },
    props: {
      type: Object,
      default: () => {
        return { children: "childList", label: "name", key: "code" };
      },
    },
    defaultCode: {
      type: String,
      default: "",
    },
    level: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      carets: CARETS,
      tapScopes: {},
      scopes: {},
      result: {},
    };
  },
  methods: {
    operation(type, treeNode) {
      this.$emit("operation", { type, treeNode });
    },
    changeStatus(index) {
      // 图标变化
      this.$set(
        this.tapScopes,
        index,
        this.tapScopes[index]
          ? this.tapScopes[index] === "open"
            ? "close"
            : "open"
          : "open"
      );
      // 展开闭合
      this.$set(this.scopes, index, this.scopes[index] ? false : true);
    },
    async checked(item) {
      this.$emit("checked", item);
    },
  },
};
</script>
<style lang="less" scoped>
@deep: ~">>>";
.treeMenu {
  padding-left: 20px;
  list-style: none;
  position: relative;
  user-select: none;
  color: #333;
}
.tree-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .tree-item-left {
    flex: 1;
  }
  .tree-item-right {
    width: 124px;
  }
  .add {
    font-size: 14px;
    color: #3385ff;
  }
  .delete {
    font-size: 14px;
    color: #f15a5a;
    margin-left: 10px;
  }
  @{deep} .f7-icons {
    font-size: 13px;
    margin-right: 5px;
  }
}
@{deep} .van-radio {
  min-width: 20px;
  margin-right: 5px;
}
.triangle {
  transition: all 0.1s;
  left: 6px;
  margin: 15px 0 0 0;
  position: absolute;
  cursor: pointer;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-left: 8px solid grey;
}
.caret-down {
  transform: rotate(90deg);
  left: 2px;
  margin: 15px 0 0 0;
}
.checkbox-wrap {
  display: flex;
  align-items: center;
}
.checkbox {
  margin-right: 0.5rem;
}
.treeNode:hover,
.treeNode:hover > .operation {
  color: #3771e5;
  background: #f0f7ff;
}
.treeNode--select {
  background: #f0f7ff;
}
.treeNode:hover > .operation {
  opacity: 1;
}
p {
  position: relative;
  display: flex;
  align-items: center;
  margin: 10px 0;
}
p > .title {
  cursor: pointer;
}
a {
  color: cornflowerblue;
}
.operation {
  position: absolute;
  right: 0;
  font-size: 18px;
  opacity: 0;
}
</style>
